<template>
	<view>
		<Qzform ref="qFrom" v-model:modelObj="model" v-model:formInfo="formInfo"></Qzform>
		<button type="primary" @click="submit('baseForm')">提交</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import Qzform from "@/components/Qzform";
	import {getSex} from '@/api/app.js'
	// 响应式数据
	const model = ref({});
	const formInfo = ref([]);
	const rules = ref({});
	const qFrom = ref(null);
	// 初始化数据
	const initData = () => {
		const data = getData();
		data.forEach((item) => {
			model.value[item.name] = "";
			rules.value[item.name] = item.rules;
		});
		formInfo.value = data;
		console.log("formInfo.value", formInfo.value);
	};

	// 模拟请求后端的数据
	const getData = () => {
		return [{
				name: "name",
				label: "姓名",
				type: "input",
				required: true,
			},
			{
				name: "age",
				label: "年龄",
				type: "input",
				required: true,
			},
			{
				name: "sex",
				label: "性别",
				type: "radio",
				multiple: false,
				required: true,
				options: () => {
					return new Promise((resolve, reject) => {
						getSex().then(res => {
							console.log("resres",res.list)
							resolve(
								res.list
							);
						})
					});
				}
			},
			{
				name: "like",
				label: "爱好",
				type: "checkbox",
				options: [{
						text: "跑步",
						value: 0,
					},
					{
						text: "游泳",
						value: 1,
					},
					{
						text: "绘画",
						value: 2,
					},
					{
						text: "足球",
						value: 3,
					},
					{
						text: "篮球",
						value: 4,
					},
					{
						text: "其他",
						value: 5,
					},
				],
			},
			{
				name: "introduction",
				label: "自我介绍",
				type: "textarea",
				required: false,
			},
			{
				name: "datetimesingle",
				label: "时间",
				type: "datetime",
				required: false,
			},
			{
				name: "city",
				label: "城市",
				type: "dataPicker",
				options: [{
							text: "北京",
							value: "10001",
						},
						{
							text: "上海",
							value: "10002",
						},
						{
							text: "深圳",
							value: "10004",
						},
					],
			},
		];
	};

	// 提交
	const submit = () => {
		console.log("qzFrom", qFrom.value.validate())
		qFrom.value.validate().then((res) => {
			console.log("model", model.value)
			uni.showToast({
				icon: "success",
				title: "校验通过",
			});
		}).catch((errors) => {
			uni.showToast({
				icon: "error",
				title: "校验失败",
			});
		});
	};

	// 重置
	const reset = () => {
		form.value.resetFields();
		form.value.clearValidate();
	};

	// 隐藏键盘
	const hideKeyboard = () => {
		uni.hideKeyboard();
	};

	// 生命周期
	onMounted(() => {
		initData();
	});
</script>